import React from 'react';
import ReactDom from 'react-dom';
// 引入react的高级api portal,将reactDom从react中解构出来
// ReactDOM.createPortal(child, container)
// 第一个参数（`child`）是任何[可渲染的 React 子元素]，例如一个元素，字符串或 fragment。第二个参数（`container`）是一个 DOM 元素。
class PortalCom extends React.Component {
    constructor(){
        super()
        this.other = document.createElement('div')//创建一个元素div
        this.other.id = 'other' //定义这个元素的id名字
    }
    componentDidMount(){ //钩子函数
        document.body.appendChild(this.other) //将创建的元素，加到body中
    }
    render() {
        let el = (<fieldset>
            <legend>传送门</legend>
            <h3>离开它的父组件</h3>
        </fieldset>)
        return ReactDom.createPortal(el,this.other)//第一个参数是渲染的元素，第二个参数是一个dom元素
    }
}
export default PortalCom